<template>
  <div class="app-container">
    <div class="login-container">
      <div class="login-title">
        <h2>管理系统</h2>
      </div>
      <el-form :model="user"
               class="login-form"
               label-position="left"
               label-width="auto"
               size="medium"
      >
        <el-form-item prop="username">
          <el-input
            clearable
            placeholder="账号"
            prefix-icon="el-icon-user"
            v-model="user.username">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="密码"
            prefix-icon="el-icon-lock"
            show-password
            v-model="user.password">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="12">
              <el-input
                @keyup.enter.native="loginAction"
                class="login-input"
                clearable
                placeholder="验证码"
                prefix-icon="el-icon-picture"
                v-model="user.code">
              </el-input>
            </el-col>
            <el-col :span="12">
              <el-image
                :src="imgCodeUrl"
                class="login-img-url">
              </el-image>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="login-btn-action">
          <el-button
            :loading="loading"
            @click.native.prevent="loginAction"
            class="login-btn"
            type="primary"
          >
            登录
          </el-button>
          <el-button
            @click.native.prevent="resetLogin()"
            class="reset-btn"
            type="primary"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="login-tips">
        <p>Tips:账号密码随便填!</p>
      </div>
    </div>
  </div>
</template>

<script>
	import {setUserToken} from '@/utils/token'
	import {formHasEmpty} from '@/utils/validate'
	import {mapActions} from 'vuex'

	export default {
		name: 'Login',
		data() {
			return {
				// 这里是需要提交的表单信息
				user: {
					username: null,
					password: null,
					code: null
				},
				// 服务器端验证码
				imgCodeUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				loading: false
			}
		},
		computed: {},
		methods: {
			...mapActions('user', ['setUserInfo']),
			loginAction() {
				this.loading = true
				let userInfo = {
					// 用户名
					username: this.user.username,
					// 密码
					password: this.user.password,
					// 验证码
					code: this.user.code
				}
				// 验证表单是否含有空属性
				if (formHasEmpty(userInfo)) {
					this.$message({
						message: '登录失败,表单不完整!',
						type: 'error',
						center: true,
						duration: 1000
					})
					this.loading = false
					this.resetLogin()
				} else {
					this.$api.login.login(userInfo)
					.then((res) => {
							if (res.status === 200) {
								this.$message({
									message: '恭喜你,登录成功!',
									type: 'success',
									center: true,
									duration: 1000
								})
								// 跳到路由名是dashboard的组件
								this.$router.push({name: 'home'})
								// 设置vuex状态,需要保存用户名,头像,权限信息
								userInfo = {
									username: this.user.username,
									token: res.data.data.token
									//avatar: res.data.data.avatar,
									//permissions: res.data.data.permissions,
								}
								this.setUserInfo(userInfo)
								// 设置token
								setUserToken(res.data.data.token)
								this.loading = false
							} else {
								this.$message({
									message: '登录失败,账号名/密码错误!',
									type: 'error',
									center: true,
									duration: 1000
								})
								this.resetLogin()
							}
						}
					)
					.catch()
				}
			},
			resetLogin() {
				this.user = {
					username: null,
					password: null,
					code: null
				}
			},
			getImgCode() {
				/*this.$api.login.captcha().then((res) => {
          //this.imgCodeUrl = res.data
          console.log(typeof res.data)
        })*/
			}
		},
		created() {
			this.setUserInfo('')
			/*//this.getImgCode()
      let data = {
        'username': 'admin',
        'password': '123456',
      }
      this.$api.login.login(data).then((res) => {
        console.log('res.data' + JSON.stringify(res.data))
      })*/
		}
	}
</script>

<style lang="scss" scoped>
  .app-container {
    background-image: url("https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png");

    .login-container {
      position: relative;
      top: 20%;
      text-align: center;
      background-color: #FFF;
      opacity: 0.9;
      margin: 0 auto;
      width: 30%;
      overflow-y: hidden;

      .login-img-url {
        height: 36px;
      }

      .login-btn-action {
        width: 100%;

        .login-btn {
          float: right;
          margin-right: 20%;
        }

        .reset-btn {
          float: left;
          margin-left: 20%;
        }
      }
    }
  }
</style>
